<template>
	<view>
		<view class="item" v-for="(item,i) in treeData" :key="item.id">
			<template v-if="!item.repeatFlag">
				<template v-if="isSecond">
					<view class="sonItem">
						<image mode="widthFix" class="treePar" src="../../../../static/images/zhuxue/treeIcon.png"></image>
						<rich-text class="nodeTit" :nodes="item.text"></rich-text>
					</view>
				</template>
				<template v-else>
					<view class="sonItem">
						<image mode="widthFix" class="treeSon" src="../../../../static/images/zhuxue/sonTreeIcon.png"></image>
						<rich-text class="nodeTit" :nodes="item.text"></rich-text>
					</view> 
				</template>
				<view class="currRes">
					<template v-if="item.zdxzdFlag != undefined">
						<template v-if="item.zdxzdFlag == -1">
							<text class="noPassGray">[未诊断]</text>
						</template>
						<template v-else-if="item.zdxzdFlag == 0">
							<text class="noPassTxt">[诊断未通过]</text>
						</template>
						<template v-else>
							<text class="passTxt">[诊断通过]</text>
						</template>
					</template>
					<template v-if="item.studyFlag != undefined">
						<template v-if="item.studyFlag == -1">
							<text class="study noPassGray">[未学习]</text>
						</template>
						<template v-else-if="item.studyFlag == 0">
							<text class="study noPassTxt">[学习未通过]</text>
						</template>
						<template v-else>
							<text class="study passTxt">[已学习{{item.studyTimes}}次]</text>
						</template>
					</template>
					<template v-if="item.zczdFlag != undefined">
						<template v-if="item.zczdFlag == -1">
							<text class="noPassGray">[未再次诊断]</text>
						</template>
						<template v-else-if="item.zczdFlag == 0">
							<text class="noPassTxt">[再次诊断未通过]</text>
						</template>
						<template v-else>
							<text class="passTxt">[再次诊断通过]</text>
						</template>
					</template>
				</view>
				<relation-res :isSecond="false" v-if="item.children && item.children.length" :treeData="item.children"></relation-res>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: "relation-res",
		props:{
			treeData:Array,
			isSecond:Boolean
		},
		data(){
			return{
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item{
		margin-left: 20rpx;
		margin-bottom: 10rpx; 
	}
	.currRes{
		@include respTo(phone){
			font-size: $font-size26;
			margin-left: 44rpx;
		}
		@include respTo(pad){
			margin-left: 22rpx;
			font-size: $padSize12;
		}
		color: $pss-text-colora;
		margin-top: -10rpx;
		.study{
			margin: 0 10rpx;
		}
		.noPassGray{
			color: $pss-text-colora;
		}
		.noPassTxt{
			color: $pss-color-red;
		}
		.passTxt{
			color: $pss-color-green;
		}
	}
	.sonItem{
		color: $pss-text-color3;
		display: flex;
		align-items: center;
		@include respTo(phone){
			min-height: 65rpx;
			font-size: $font-size30;
		}
		@include respTo(pad){
			min-height: 45rpx;
			font-size: $padSize16;
		}
		.treeSon{
			flex-shrink: 0;
			@include respTo(phone){
				margin-right: 10rpx;
				width: 30rpx;
			}
			@include respTo(pad){
				margin-right: 5rpx;
				width: 14rpx;
			}
		}
		.treePar{
			@include respTo(phone){
				width: 36rpx;
				margin-right: 10rpx;
			}
			@include respTo(pad){
				width: 18rpx;
				margin-right: 5rpx;
			}
			flex-shrink: 0;
		}
		.nodeTit{
			color: $pss-text-color3;
			@include respTo(phone){
				font-size: $font-size28;
			}
			@include respTo(pad){
				font-size: $padSize14;
			}
		}
	}
</style>